<template>
    <div class="system-page"> <el-card class="search-box"> <el-form :inline="true" :model="searchForm"
                class="search-form"> <el-form-item label="配置键名"> <el-input v-model="searchForm.config_key"
                        placeholder="配置键名" clearable></el-input> </el-form-item> <el-form-item label="配置名称"> <el-input
                        v-model="searchForm.config_name" placeholder="配置名称" clearable></el-input> </el-form-item>
                <el-form-item> <el-button type="primary" @click="onSearch" plain>查询</el-button> </el-form-item>
            </el-form> </el-card> <el-card class="table-box">
            <div class="table-tool" style="display: flex;margin-bottom: 15px;">
                <el-button type="primary" plain @click="handleAdd">添加</el-button>
                <el-button type="success" plain @click="handleEdit">修改</el-button>
                <el-button type="danger" plain @click="handleDelete">删除</el-button>
            </div>
            <div class="table-list"> <el-table :data="tableData" stripe border :highlight-current-row="true"
                    style="width: 100%" @selection-change="handleSelectionChange"> <el-table-column type="selection"
                        width="55"></el-table-column> <el-table-column type="index" width="60"
                        label="序号"></el-table-column> <el-table-column prop="config_key" label="配置键名"></el-table-column>
                    <el-table-column prop="config_name" label="配置名称"></el-table-column>
                    <el-table-column prop="config_value" label="配置键值"></el-table-column>
                    <el-table-column prop="create_time" label="创建时间"></el-table-column>
                    <el-table-column prop="remark" label="备注"></el-table-column>
                    <el-table-column prop="update_time" label="修改时间"></el-table-column> 
                    <el-table-column prop="operate"
                        label="操作" align="center"> 
                        <template #default="scope"> 
                            <el-button type="primary" plain
                                size="small" @click="() => handleEdit(scope.row.id)">修改</el-button> 
                                <el-button
                                type="danger" plain size="small"
                                @click="() => handleDelete(scope.row.id)">删除</el-button> 
                            </template>
                    </el-table-column> </el-table> </div>
            <div class="table-pagination"> <el-pagination v-model:current-page="searchForm.pageNum"
                    v-model:page-size="searchForm.pageSize" :page-sizes="[10, 20, 30, 50]" background
                    layout="total, sizes, prev, pager, next, jumper" :page-count="pageCount" :total="total"
                    @change="onSearch" />
            </div>
        </el-card>
        <UnifiedForm ref="UnifiedFormRef" v-model:dialogFrom="dialogFrom" @onParentSearch="onSearch"></UnifiedForm>
    </div>
</template>
<script lang="ts" setup>
// ---------------------------------------------------导入相关引用---------------------------------------------------
import { ref, reactive, onMounted } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus'
import UnifiedForm, { type DialogFrom } from '@/views/temple/components/UnifiedForm.vue'
import type { SearchListParams, TableData } from '@/views/temple/api/temple'
import { getList, delteInfo } from '@/views/temple/api/temple'
// ---------------------------------------------------相关参数定义---------------------------------------------------
// const searchForm = reactive<SearchListParams>({    pageNum: 1,    pageSize: 10,            config_key: ''            config_name: ''})
// const tableData = ref<TableData[]>([{    id: 1,    templateName: '模板1'}])
// const pageCount = ref(0)
// const total = ref(0)
// const selectionTableData = ref<number[]>([])
// const dialogFrom = ref<DialogFrom>({    dialogTitle: '添加数据',    dialogVisible: false,    infoId: null})
// // ---------------------------------------------------事件定义---------------------------------------------------
// /** * 页面加载时回调 */
// onMounted(() => {    onSearch();})
// // ---------------------------------------------------操作方法定义---------------------------------------------------
// /** * 查询 */
// const onSearch = () => {    
// getList(searchForm).then((res) => {        
// if (res.data.code === 200) {            
// tableData.value = res.data.data.records;            
// pageCount.value = res.data.data.pages;            
// total.value = res.data.data.total;        
// }    
// });}
// /** * 添加 */
// const handleAdd = () => {    
// dialogFrom.value.dialogTitle = '添加数据';    
// dialogFrom.value.dialogVisible = true;    dialogFrom.value.infoId = null;}/** * 修改 * @param rowId id */const handleEdit = (rowId: number) => {    if (typeof rowId !== 'number') {        if (selectionTableData.value.length == 0) {            ElMessage.warning('请选择一条数据');            return;        } else if (selectionTableData.value.length > 1) {            ElMessage.warning('只能选择一条数据');            return;        }        rowId = selectionTableData.value[0];    }    dialogFrom.value.dialogTitle = '修改数据';    dialogFrom.value.dialogVisible = true;    dialogFrom.value.infoId = rowId;}/** * 删除 * @param rowId id */const handleDelete = (rowId: number) => {    if (rowId) {        deleteApi(rowId)    } else {        if (selectionTableData.value.length == 0) {            ElMessage.warning('请选择一条数据');        } else {            deleteApi(selectionTableData.value)        }    }}/** * 删除接口调用 * @param id id */const deleteApi = (rowId: number | number[]) => {    ElMessageBox.confirm('确定要删除选中的数据吗？', '提示', {        confirmButtonText: '确定',        cancelButtonText: '取消',        type: 'warning',    }).then(() => {        delteInfo(rowId).then((res) => {            if (res.data.code === 200) {                ElMessage.success('删除成功');                onSearch();            }        })    }).catch(() => { })}/** * 多选 * @param val 选中的数据 */const handleSelectionChange = (val: TableData[]) => {    selectionTableData.value = val.map((item) => {        return item.id;    });}</script>
<style lang="scss" scoped>
.templet-page {
    width: 100%;
    height: 100%;
}
</style>